import React, { Component } from 'react'
import styles from "./goodDetail.module.scss"
import { getGoodDetail } from "../../data/api"
import { Carousel, WingBlank } from 'antd-mobile';
import BrNav from '../brNav/BrNav'
export default class GoodDetail extends Component {
    state = {
        detailCarousel: [],//详情页的轮播图数据
        data: [],//详情页的数据
    }
    async componentDidMount() {
        // console.log(this.props.match.params.goods_id);
        let goods_id = this.props.match.params;
        let res = await getGoodDetail(goods_id);
        let detailCarousel = res.message.pics
        let data = res.message;
        console.log(data);
        this.setState((prevState) => {
            return {
                detailCarousel: detailCarousel,
                data: data
            }
        })
    }
    render() {
        return (
            <div className={styles.goodDetail}>
                {/* 详情页标题开始 */}
                <BrNav title="详情页" left={true}></BrNav>
                {/* 详情页标题结束 */}
                {/* 详情页内容开始 */}
                <div className={styles.goodDetailContent}>
                    <div className={styles.carouselBox}>
                        <Carousel autoplay={true} infinite>
                            {this.state.detailCarousel.map(val => (
                                <div className={styles.carouselImg} style={{ height: "250px", width: "100%" }} key={val.pics_id}>
                                    <img
                                        src={val.pics_mid}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </div>
                            ))}
                        </Carousel>
                    </div>
                    {/* 价格描述开始 */}
                    <div className={styles.goodDetailPrice}>
                        <span className={styles.price}>￥{this.state.data.goods_price}</span>
                        <div className={styles.cellect}>
                            <i className="iconfont icon-fenxiang"></i>
                            <i className="iconfont icon-shoucang"></i>
                        </div>
                    </div>
                    {/* 价格描述结束 */}
                    {/* 产品描述开始 */}
                    <div className={styles.describe}>
                        <p className={styles.describeTitle}>{this.state.data.goods_name}</p>
                    </div>
                    {/* 产品描述结束 */}
                    {/* 产品图片列表开始 */}
                    <div className={styles.picDetail}>
                        <div className={styles.picDetailTitle}>图文详情</div>
                        <div className={styles.picDetailContent}
                            dangerouslySetInnerHTML={{ __html: this.state.data.goods_introduce }}
                        >
                        </div>
                    </div>
                    {/* 产品图片列表结束 */}
                </div>
                {/* 详情页内容结束 */}
                {/* 详情页底部导航开始 */}
                <div className={styles.goodDetailFooter}>
                    <div className={styles.footerItem}>
                        <i className="iconfont icon-lianxikefu"></i>
                        <span className={styles.itemTitle}>联系客服</span>
                    </div>
                    <div className={styles.footerItem}>
                        <i className="iconfont icon-gouwuche1"></i>
                        <span className={styles.itemTitle}>购物车</span>
                    </div>
                    <div className={styles.footerItem}>
                        <span className={styles.addCart}>加入购物车</span>
                    </div>
                    <div className={styles.footerItem}>
                        <span className={styles.purchase}>立即购买</span>
                    </div>
                </div>
                {/* 详情页底部导航结束 */}
            </div>
        )
    }
}
